<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 
        兄弟选择器：
            +  选中某个元素后面紧挨着的那个兄弟  一定是后面的
            ~  选中某个元素后面的所有的兄弟，一定是后面的  不包含自己
     -->
    <style>
        /* .item1{
            color:red;
        } */

        /* +表示选中某个元素紧挨着的那个兄弟 */
        /* .item1+li{
            color:red;
        } */

        /* ~选中某个元素后面的所有的兄弟 */
        /* .item1~li{
            color:red;
        } */

        /* .item2+li{
            color:red;
        } */

        .item2~li{
            color:red;
        }
    </style>
</head>

<body>
    <ul>
        <li class="item1">我是一个li标签1</li>
        <li class="item2">我是一个li标签2</li>
        <li>我是一个li标签3</li>
        <li>我是一个li标签4</li>
    </ul>
</body>

</html>